/* 公共样式 */

/* 首先去掉 浏览器公共的样式 去掉内外边距 盒子模型 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设置背景图片 先拉高高度 html父元素就是window窗口 
   html 和 body 都是块级元素 如果不手动指定 大小就知识包裹全部元素 
*/
html,
body {
  /* 是相对父元素高度是100% */
  height: 100%;

  /* 相对路径 往上 . . 就到了static目录 找到imgs下图片 */
  background-image: url(../imgs/boyi.jpeg);
  /* 不平铺  垂直居中 尽可能拉伸放大 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.nav {
  height: 50px;
  background-color: rgb(50, 50, 50);
  color: white;
  /* 垂直居中 */
  line-height: 50px;
  padding-left: 20px;
}

.container {
  width: 100%;
  height: calc(100% - 50px);

  /* 使里面的元素 垂直水平居中 弹性布局 */
  display: flex;
  align-items: center;
  justify-content: center;
}
